<template>
  <Row class="Main_box">
      <i-col span="16" id='left_div_main' >
       <Left />
      </i-col>
      <i-col span="7" id='rightDiv' class="Maiin_introduce">
        <Right />
      </i-col>
  </Row>
</template>

<script>
import Left from './Left/Left'
import Right from './Right/Right'
export default {
  components: {
    Left,
    Right,
  },
  mounted() {
    window.addEventListener('scroll',this.gunDong)
  },
  data() {
    return {
      falg:0,
    }
  },
  props:{
    gid:{//商品id
      type:Number,
      required:true,
    },
  },
  methods: {
    gunDong() {
      var leftDiv = document.getElementById('left_div_main');
      var rightDiv = document.getElementById('rightDiv');
      var leftHeight = leftDiv.getBoundingClientRect().bottom;
      var rightHeight = rightDiv.getBoundingClientRect().bottom;
      var rightTop = rightDiv.getBoundingClientRect().top;
      var leftTop = leftDiv.getBoundingClientRect().top;

      switch(this.falg){
        case 0:
          if(rightHeight<300){//下降超过浏览器
            rightDiv.removeAttribute("style");
            rightDiv.style.position = 'fixed';
            rightDiv.style.bottom = '2vw';
            rightDiv.style.right = '12.3vw';
            rightDiv.style.width = "320px";
            this.falg = 1;
          };
          break;
        case 1:
          if(parseInt(leftTop)>=parseInt(rightTop)){//下降头部平齐
            rightDiv.removeAttribute("style");
            rightDiv.style.position = 'relative';
            rightDiv.style.bottom = '0vw';
            rightDiv.style.right = '0vw';
            this.falg = 0;
          }else if(leftHeight<rightHeight){//下降到底部
            rightDiv.removeAttribute("style");
            rightDiv.style.position = 'absolute';
            rightDiv.style.bottom = '2vw';
            rightDiv.style.right = "3.3vw";
            this.falg = 2;
          }
          break;
        case 2:
          if(rightTop>0){//div上升超过浏览器
            rightDiv.removeAttribute("style");
            rightDiv.style.position = 'fixed';
            rightDiv.style.top = '2vw';
            rightDiv.style.right = '12.3vw';
            rightDiv.style.width = "320px";
            this.falg = 3;
          };
          break;
        case 3:
          if(rightTop<=leftTop){//上升到头部对齐
            rightDiv.removeAttribute("style");
            rightDiv.style.position = 'relative';
            rightDiv.style.right = '0vw';
            rightDiv.style.top = '0vw';
            this.falg=0;
          }else if(rightHeight>=leftHeight){
            rightDiv.removeAttribute("style");
            rightDiv.style.position = "absolute";
            rightDiv.style.bottom = '2vw';
            rightDiv.style.right = '3.3vw';
          }
          break;
      }
    },
  },
  destroyed() {
    window.removeEventListener('scroll',this.gunDong);
  },
}
</script>

<style scoped>
  .Main_box{
    min-width: 80.5vw;
    width: 80.5vw;
    margin: auto;
    position: relative;
    top: 9.60417vw;
    background-color: #F9F9F9;
    /* border:1px solid */
  }
  .Main_introduce{
    margin: 1.004vw;;
    border: 1px solid;
  }
</style>
